<template>
	<view class="order-detail-container">
		<uv-gap height="10" bgColor="transparent" />
		<!-- 进度条 -->
		<view class="address-section">
			<uv-icon name="map" size="20" color="#ff0000"></uv-icon>
			<view class="address-info">
				<view class="name">
					{{info.address}}
				</view>
				<view class="phone">{{info.address_name}} {{info.address_tel}}</view>
			</view>
		</view>
		<uv-gap height="10" bgColor="transparent" />
		<view class="order-section">
			<view class="flex-1 flex align-center padding3">
				<image :src="info.brand_logo" class="logo" />
				<text class="brand_name">{{info.merchant_name}}</text>
				<uv-icon name="arrow-right" color="#999" size="12" />
			</view>
			<uv-line color="#EEEEEE" />
			<uv-gap height="10" bgColor="transparent" />
			<view class="flex padding2" v-for="(a,i) in info.order_info">
				<image :src="a.product_image" class="thumb" />
				<view class="flex-1 flex align-start justify-between">
					<view class="skus">
						<text class="pName">{{a.product_name}}</text>
						<uv-gap height="5" bgColor="transparent" v-if="a.spec_values" />
						<view class="tags" v-if="a.spec_values">{{a.spec_values}}</view>
					</view>
					<view class="jiage">
						<view class="t1">￥{{a.price}}</view>
						<view class="t2">x{{a.cart_num}}</view>
						<view class="btn" @click.stop="btnClick(5,i)"
							v-if="(info.status==2 || info.status==3) && a.after_sales_id==0">申请退款</view>
						<view class="btn" @click.stop="btnClick(9,i)" v-if="a.after_sales_id>0">售后详情
						</view>
					</view>
				</view>
			</view>
		</view>
		<uv-gap height="10" bgColor="transparent" />
		<view class="order-section">
			<view class="order-info">
				<view class="orderNo" @click="showBase">
					<view class="lbl_pay">订单编号：</view>{{info.order_no}}<uv-icon :name="iconName" size="16"></uv-icon>
				</view>
				<uv-button size="mini" type="primary" plain @click="copyOrderNo" style="margin-left: 10px;">
					复制
				</uv-button>
			</view>
			<view v-if="showPayInfo">
				<view class="order-info">
					<view class="lbl_pay">支付方式：</view>
					<view class="pay_info">{{info.pay_name}}</view>
				</view>
				<view class="order-info">
					<view class="lbl_pay">下单时间：</view>
					<view class="pay_info">{{info.create_time}}</view>
				</view>
				<view class="order-info">
					<view class="lbl_pay">支付时间：</view>
					<view class="pay_info">{{info.pay_time}}</view>
				</view>
			</view>
		</view>
		<uv-gap height="10" bgColor="transparent" />
		<view class="order-section">
			<view v-if="packageList.length>0">
				<view class="box">
					<scroll-view scroll-x style="white-space: nowrap; display: flex;"
						:scroll-into-view="'package-' + activeIndex" scroll-with-animation>
						<view :id="'package-' + i" class="package" :class="{ 'selected': activeIndex === i }"
							v-for="(e,i) in packageList" @click="packageClick(e,i)">
							<view class="package-left">
								<text class="name" :class="{ 'selected': activeIndex === i }">包裹{{i+1}}</text>
								<text class="num">共{{e.goods_count}}件</text>
							</view>
							<view class="flex">
								<uv-icon :name="item" v-for="item in e.goods_images" size="30" />
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="footer-btn">
			<view class="order-actions">
				<template v-if="info.status == 1">
					<uv-button text="取消订单" size="mini" plain @click="btnClick(2)" />
					<uv-button text="立即支付" size="mini" plain @click="btnClick(4)" color="#BC2722" />
				</template>
				<template v-if="info.status===3">
					<uv-button text="确认收货" size="mini" @click="btnClick(7)" color="#BC2722" />
				</template>
				<template v-if="info.status===7">
					<uv-button text="删除订单" size="mini" @click="btnClick(3)" />
				</template>
				<template v-if="info.status===4">
					<uv-button text="去评价" size="mini" @click="btnClick(8)" color="#BC2722" />
				</template>
				<template v-if="info.status===5">
					<uv-button text="删除订单" size="mini" @click="btnClick(3)" />
				</template>
			</view>
		</view>
		<uv-popup ref="popupRef" mode="bottom" round="10">
			<view class="popup-content">
				<view class="flex align-end justify-center">
					<uv-text class="uv-text-init" text="¥" size="30upx" color="#333" align="center" bold
						style="margin-bottom: 5upx;" />
					<uv-text class="uv-text-init" :text="payAmount" size="40upx" color="#333" align="center" bold />
				</view>
				<uv-gap height="20" bgColor="transparent" />
				<uv-cell-group :border="false">
					<uv-cell v-for="(item, index) in payList" :key="index" :icon="item.piclink" :title="item.pay_name"
						@click="getPayType(index)" :border="false" titleStyle="font-size:28upx">
						<template #value>
							<uv-icon name="checkmark-circle-fill" color="#C52923" size="20"
								v-if="payType == item.type" />
							<uv-icon name="checkmark-circle" color="#B1B1B1" size="20" v-else />
						</template>
					</uv-cell>
				</uv-cell-group>
				<uv-gap height="20" bgColor="transparent" />
				<view class="btn">
					<uv-button text="确认付款" color="#C52923" shape="circle" @click="closePopup" />
				</view>
			</view>
		</uv-popup>
		<uv-popup ref="popPwdRef" mode="center" round="10" closeable>
			<view class="popup-content" style="width: 600upx;">
				<uv-text text="输入密码" bold="true" size="30upx" align="center"></uv-text>
				<uv-gap height="20" bgColor="transparent" />
				<view class="flex align-center justify-center padding2">
					<uv-input placeholder="请输入支付密码" type="password" v-model="payPwd" />
				</view>
				<uv-gap height="20" bgColor="transparent" />
				<view class="btn">
					<uv-button text="确认支付" color="#C52923" shape="circle" @click="doPay" />
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		getIconPath
	} from '@/util'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getMarketOrderDetail,
		cancelServiceOrder,
		getPaymentMethod,
		payOrder,
		getPackageList
	} from '@/api'
	import {
		useRefreshStore,
		userefundStore,
		useCommnetStore
	} from '@/store'
	const refreshStore = useRefreshStore()
	const refund = userefundStore()
	const commentStore = useCommnetStore()
	const payList = ref([])
	const payType = ref('')
	const payPwd = ref('')
	const is_third_party_payment = ref(0)
	const popupRef = ref(null)
	const popPwdRef = ref(null)
	const payAmount = ref(0)
	const info = ref({})
	const showPayInfo = ref(false)
	const iconName = ref('arrow-down')
	const activeIndex = ref(-1)
	const packageList = ref([]);
	const showBase = () => {
		showPayInfo.value = !showPayInfo.value
		iconName.value = iconName.value === 'arrow-down' ? 'arrow-up' : 'arrow-down'
	}
	const copyOrderNo = () => {
		uni.setClipboardData({
			data: info.value.order_no,
			success: function() {
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				})
			}
		})
	}

	const getLogisticsData = async (delivery_id, freight_no) => {
		logisticsData.value = (await getLogistics({
			delivery_id: delivery_id,
			freight_no: freight_no
		})).result
	}

	const packageClick = (e, i) => {
		activeIndex.value = i
		uni.navigateTo({
			url: '/pages-home/market/logistics?order_id=' + info.value.order_id + '&merchant_order_id=' + info
				.value.id + '&activeIndex=' + i
		})
	}

	onLoad(async (option) => {
		if (option.order_id) {
			info.value = (await getMarketOrderDetail({
				order_id: option.order_id,
				merchant_order_id: option.merchant_order_id
			})).result
			payAmount.value = info.value.total_price
			if (info.value.status == 2 || info.value.status == 3 || info.value.status == 4 || info.value
				.status == 7) {
				packageList.value = (await getPackageList({
					order_id: option.order_id,
					merchant_order_id: option.merchant_order_id
				})).result
			}
		}
	})
	const getPayList = async () => {
		const {
			result
		} = await getPaymentMethod()
		payList.value = result
	}

	const getPayType = (index) => {
		payType.value = payList.value[index].type
		is_third_party_payment.value = payList.value[index].is_third_party_payment
	}

	const btnClick = async (type, i) => {
		if (type == 2) {
			uni.showModal({
				title: '提示',
				content: '确定取消订单吗？',
				success: async (res) => {
					if (res.confirm) {
						let result = await cancelMarketOrder({
							order_id: info.value.order_id,
							merchant_order_id: info.value.id
						})
						if (result.code == 200) {
							uni.showToast({
								title: '取消订单成功',
								icon: 'none'
							})
						} else {
							uni.showToast({
								title: result.msg,
								icon: 'none'
							})
						}
					}
				}
			})
		} else if (type == 3) {
			uni.showModal({
				title: '提示',
				content: '确定删除订单吗？',
				success: async (res) => {
					if (res.confirm) {
						let result = await delMarketOrder({
							order_id: info.value.order_id,
							merchant_order_id: info.value.id
						})
						if (result.code == 200) {
							uni.showToast({
								title: '删除订单成功',
								icon: 'none'
							})
						} else {
							uni.showToast({
								title: result.msg,
								icon: 'none'
							})
						}
					}
				}
			})
		} else if (type == 4) {
			uni.navigateTo({
				url: '/pages-home/market/goods_topay?order_id=' + info.value.order_id +
					'&merchant_order_id=' + info.value.id
			})
		} else if (type == 5) {
			let product = info.value.order_info[i];
			refund.setRefundData(product);
			uni.navigateTo({
				url: '/pages-home/market/refund'
			})
		} else if (type == 7) {
			uni.showModal({
				title: '提示',
				content: '确定已收到货吗？',
				success: async (res) => {
					if (res.confirm) {
						let result = await receiveGoods({
							order_id: info.value.order_id,
							merchant_order_id: info.value.id
						})
						if (result.code == 200) {
							uni.showToast({
								title: '收货成功',
								icon: 'none'
							})
						} else {
							uni.showToast({
								title: result.msg,
								icon: 'none'
							})
						}
					}
				}
			})
		} else if (type == 8) {
			//去评价
			let comment_product = {
				"order_id": info.value.order_id,
				"merchant_order_id": info.value.id,
				"product": [],
				"is_anonymous": 0
			};
			for (let k = 0; k < info.value.order_info.length; k++) {
				if (info.value.order_info[k].after_sales_id > 0){
					continue;
				}
				comment_product.product.push({
					"product_id": info.value.order_info[k].product_id,
					"sku_id": info.value.order_info[k].sku_id,
					"product_image": info.value.order_info[k].product_image,
					"star_rating": 0,
					"content": "",
					"image": [],
					"video": ""
				})
			}
			commentStore.setCommentData(comment_product)
			uni.navigateTo({
				url: '/pages-home/market/comment'
			})
		} else if (type == 9) {
			let order_info_id = info.value.order_info[i].id
			if (info.value.order_info[i].apply_for_type == 1 && info.value.order_info[i].after_sales_status == 2 && info.value.order_info[i].refund_express == ''){
				uni.navigateTo({
					url: '/pages-home/market/refund_form?order_info_id=' + order_info_id
				})
			} else {
				uni.navigateTo({
					url: '/pages-home/market/ass_info?order_info_id=' + order_info_id
				})
			}
		}
	}
	const closePopup = async () => {
		popupRef.value.close()
		let params = {
			order_id: info.value.id,
			pay_type: payType.value
		}
		if (is_third_party_payment.value == 0) {
			popPwdRef.value.open()
		} else {
			let result = await goPay(params)
			if (result.code == 200) {
				uni.navigateTo({
					url: '/pages-home/service/pay_result?id=' + info.value.id,
				})
			} else {
				uni.navigateTo({
					url: '/pages-home/service/pay_result?id=' + info.value.id + '&err=' + result.msg,
				})
			}
		}
	}

	const doPay = async () => {
		if (!payPwd.value) return uni.$uv.toast('请输入支付密码')
		popPwdRef.value.close()
		let params = {
			order_id: info.value.id,
			pay_type: payType.value,
			password: payPwd.value
		}
		let result = await goPay(params)
		if (result.code == 200) {
			uni.navigateTo({
				url: '/pages-home/service/pay_result?id=' + info.value.id,
			})
		} else {
			uni.navigateTo({
				url: '/pages-home/service/pay_result?id=' + info.value.id + '&err=' + result.msg,
			})
		}
	}
</script>

<style lang="scss" scoped>
	.order-detail-container {
		background-color: #f7f7f7 !important;
		min-height: 100vh;
		padding-bottom: 80px;
		width: 100%;

		.address-section {
			display: flex;
			align-items: center;
			padding: 15px;
			background-color: #fff;

			.address-info {
				flex: 1;
				margin-left: 10px;

				.name {
					font-weight: bold;
					margin-bottom: 2px;
				}

				.phone {
					font-size: 12px;
					color: #666;
				}
			}
		}

		.order-section {
			background-color: #fff;
			padding: 10px 15px;

			.logo {
				width: 40upx;
				height: 40upx;
				border-radius: 6upx;
				margin-right: 10upx;
			}

			.brand_name {
				color: #333;
				font-size: 28upx;
				margin-right: 10upx;
			}
		}

		.padding1 {
			padding: 20upx;
		}

		.padding2 {
			margin-bottom: 20upx;
		}

		.padding3 {
			padding: 10upx 0 10upx 10upx;
		}

		.margin10 {
			margin-right: 10upx;
		}

		.margin20 {
			margin-left: 10upx;
			margin-right: 20upx;
		}

		.t1 {
			color: #333;
			font-size: 30upx;
		}

		.t2 {
			color: #979797;
			font-size: 24upx;
			text-align: right;
		}

		.thumb {
			width: 120upx;
			height: 120upx;
			border-radius: 6upx;
			margin-right: 20upx;
			margin-bottom: 20upx;
		}

		.skus {
			.pName {
				font-size: 26upx;
				color: #333;
			}

			.tags {
				background: #F2F2F2;
				color: #333;
				display: inline-flex;
				border-radius: 6upx;
				font-size: 24upx;
				padding: 4upx 15upx;
			}
		}

		.jiage {
			margin-left: 20upx;

			.btn {
				margin-top: 5px;
				color: #333;
				font-size: 10px;
				text-align: center;
				border: 1upx solid #f2f2f2;
				padding: 8upx 5upx;
				border-radius: 5upx;
				width: 50px;
			}
		}

		.order-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10px 0;

			.lbl_info {
				width: 80px;
				font-size: 24upx;
			}

			.content_info {
				flex: 1;
				text-align: right;
				font-size: 24upx;
			}

			.lbl_pay {
				width: 80px;
				color: #979797;
				font-size: 24upx;
			}

			.pay_info {
				flex: 1;
				text-align: left;
				font-size: 24upx;
			}
		}

		.orderNo {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24upx;
		}

		.orderNo .lbl_pay {
			color: #979797;
		}

		.orderNo .uv-icon {
			margin-left: 10px;
		}

		.orderNo .uv-button {
			margin-left: 10px;
		}

		.total-price {
			color: #f56c6c;
			font-weight: bold;
		}

		.box {
			overflow: hidden;

			.package {
				border-radius: 8px;
				border: #ccc 1px solid;
				display: inline-flex;
				align-items: center;
				padding: 5px 10px 5px 0;
				margin-right: 10px;
			}

			.package.selected {
				border: #ff0000 1px solid;
			}

			.package-left {
				display: inline-flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 100upx;
				height: 80upx;

				.name {
					font-size: 14px;
					font-weight: bold;
					color: #333;
				}

				.name.selected {
					color: #ff0000;
				}

				.num {
					font-size: 12px;
					color: #979797;
				}
			}
		}

		.footer-btn {
			position: fixed;
			bottom: 20px;
			left: 0;
			right: 0;
			padding: 0 15px;

			.order-actions {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				padding: 15px;
				gap: 10px;
				background-color: #fff;
			}

			.contact-service {
				flex: 1;
				margin-right: 10px;
				color: #999;
				border-color: #eee;
			}

			.contact-service ::v-deep .uv-button__icon {
				font-size: 20px;
			}

			.modify-order {
				flex: 1;
				margin-right: 10px;
				color: #d70012;
				border-color: #d70012;
			}

			.cancel-order {
				flex: 1;
				background-color: #d70012;
				color: #fff;
			}
		}
	}

	.popup-content {
		padding: 30upx 0;
		margin: 0 auto;

		.btn {
			margin: 0 30upx;
		}

		.but {
			margin: 0 30upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.rule {
			font-size: 26upx;
			line-height: 1.2;
		}

		.confirmbtn {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.but {

		::v-deep uv-button {
			margin-left: 20upx;
			margin-right: 20upx;

		}
	}

	.tags {
		display: inline-flex;
	}
</style>